Figures

Images that include a visual caption should be in a figure element with an accompaning figcaption. By default the figure element will expand to fill the entire width of the container. A figcaption is required when using a figure so if a visual caption is not needed then us an img element.

Content Notes: All images are required to have an alt attribute. If an image is purely decorative or has a visible caption (see figures) that fully describes the contents of the image then the alt text can be an empty string (alt="").

Figure

View

an image placeholder
An image with a caption.

HTML

<figure>
  <img src="https://via.placeholder.com/400x200" alt="an image placeholder">
  <figcaption>An image with a caption.</figcaption>
</figure>

Left Aligned Figure

Figures can be positioned to the left of content using the util-align-left utility class.

View

an image placeholder
A figure that has been left aligned.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML

<figure class="util-align-left">
  <img src="https://via.placeholder.com/400x200" alt="an image placeholder">

  <figcaption>A figure that has been left aligned.</figcaption>
</figure>

<p class="cmp-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Right Aligned Figure

Figures can be positioned to the right of content using the util-align-right utility class.

View

an image placeholder
A figure that has been right aligned.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML

<figure class="util-align-right">
  <img src="https://via.placeholder.com/400x200" alt="an image placeholder">

  <figcaption>A figure that has been right aligned.</figcaption>
</figure>

<p class="cmp-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>